<!Doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            margin: 0 auto;
            background-color: #333;
        }


        #random_box {
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            width: 500px;
            height: 500px;
        }

        #random_box li {
            list-style: none;
            background-color: antiquewhite;
            width: 32%;
            height: 32%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #random_box li img {
            width: 144px;
            display: block;
            height: 144px;
        }


        #random_box li.random_current {
            background: var(--color);
            color: #FFF;
        }
    </style>
</head>

<body style="--color: #c00">
    <div class="box">
        <ul id="random_box">
            <li id="random_1">谢谢惠顾</li>
            <li id="random_2">苹果笔记本</li>
            <li id="random_3">谢谢惠顾</li>
            <li id="random_8">10Q币</li>
            <li id="ok">抽奖</li>
            <li id="random_4">谢谢惠顾</li>
            <li id="random_7">5Q币</li>
            <li id="random_6">谢谢惠顾</li>
            <li id="random_5">5Q币</li>
        </ul>
    </div>

</body>
<script>
    ok.onclick = () => {
        let index = 0;
        let last = 0;
        let zhongIndex = Math.floor(Math.random() * 8) + 1;
        let round = 6;
        let rountCnt = 0;
        let timer = null;
        let delay = 17;
        let fn = () => {
            index = (index + 1) % 9;
            if (index == 0) {
                index = 1;
                rountCnt++;
                delay += 10;
                document.body.style.cssText = `--color: rgb(${Math.random() * 256},${Math.random() * 256},${Math.random() * 256})`;
            }
            if (index == zhongIndex) {
                delay += 20;
            }
            last = index - 1;
            last = last == 0 ? 8 : last;
            document.getElementById('random_' + last).classList.remove('random_current');
            document.getElementById('random_' + index).classList.add('random_current');
            if (rountCnt == round && index == zhongIndex) {
                setTimeout(() => {
                    alert('中了index=' + index);
                }, 100)
            } else {
                setTimeout(fn, delay)
            }
        }
        fn()
    }
</script>

</html>